<template>
  <div>
    <!-- 标题导航 -->
    <van-nav-bar title="登录" class="nav-bar-page" />
    <!-- 登录表单 -->
    <van-form @submit="onSubmit" ref="loginForm">
        <van-field
            v-model="user.mobile"
            name="mobile"
            label="手机号"
            placeholder="手机号"
            :rules="userFormRule.mobile">
            <template #left-icon>
                <i class="toutiao toutiao-shouji"></i>
            </template>
        </van-field>
        <van-field
            v-model="user.smsCode"
            name="smsCode"
            label="验证码"
            placeholder="验证码"
            :rules="userFormRule.smsCode">
            <template #left-icon>
                <i class="toutiao toutiao-yanzhengma"></i>
            </template>
            <template #button>
                <van-button round type="info" color="#ededed" class="send-sms-btn" native-type="button" @click="sendSms" v-if="!isCountDown">
                    获取验证码
                </van-button>
                <!-- 倒计时器 -->
                <van-count-down :time="5 * 1000" format="ss 秒" v-else @finish='isCountDown = false' />
            </template>
        </van-field>
        <div style="margin: 16px;">
            <van-button block type="info" native-type="submit" @click="onSubmit">登录</van-button>
        </div>
    </van-form>
  </div>
</template>

<script>
import { loginAPI, getSmsAPI } from '../../api/index.js'
export default {
  name: 'LoginIndex',
  data () {
    return {
      // 表单数据
      user: {
        mobile: '',
        smsCode: ''
      },
      // 表单数据标签规则
      userFormRule: {
        mobile: [
          { required: true, message: '请填写验证码' },
          { pattern: /^1[3|5|7|8]\d{9}$/, message: '手机号格式错误' }
        ],
        smsCode: [
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '验证码格式错误' }
        ]
      },
      isCountDown: false // 控制倒计时显示
    }
  },
  methods: {
    // 表单提交事件函数
    async onSubmit () {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })

      try {
        const { data: res } = await loginAPI({
          mobile: this.user.mobile,
          code: this.user.smsCode
        })

        console.log(res)
        this.$toast.success('登录成功')
      } catch (error) {
        if (error.response.status === 400) {
          this.$toast.fail('手机号或验证码输入错误')
          console.log('手机号或验证码输入错误', error)
        } else {
          this.$toast.fail('服务器错误')
          console.log('服务器错误', error)
        }
      }
    },
    // 发送验证码
    async sendSms () {
      try {
        await this.$refs.loginForm.validate('mobile')
        // 发送验证码请求
        await getSmsAPI(this.user.mobile)
        // 让发送框重新显示
        this.isCountDown = true
      } catch (error) {
        console.log(error)
        if (error.response && error.response.status === 429) {
          this.$toast.fail('发送频繁，请稍后再试')
        } else {
          this.$toast.fail('服务器内部错误，请联系管理员处理')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.send-sms-btn {
    .van-button__text {
        font-size: 12px;
        color: #666;
    }
    width: 95px;
    height: 28px;
}
</style>
